<template>
	<div class="container">
		<navigationBar title=" "></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="carousel">
				<swiper @change="changeVideo" :style="'height: ' + swiperHeight + 'px;'" :indicator-dots="dots"
					circular='true' duration="400" indicator-active-color="#FB8E26" indicator-color="#cccccc">
					<swiper-item class="swiper-item" v-for="(item,index) in detail.filesList" :key="index">
						<div class="image-wrapper">
							<!-- 视频 -->
							<video :objectFit='objectFit'
								v-if="item.fileSuffix !== 'png' && item.fileSuffix !== 'jpg' && item.fileSuffix !== 'jpge'"
								:src="item.filePath" :id="'video'+index" @error="videoErrorCallback"
								:show-center-play-btn="false" :controls="control" :loop="true" :direction="direction"
								@play="openVideo(index)" @fullscreenchange="fullscreenchange"
								@click="toggle(index)"></video>
							<!-- 照片 -->
							<image @load="imgloadComplete" class="cover_img"
								v-if="item.fileSuffix == 'png' || item.fileSuffix == 'jpg' || item.fileSuffix == 'jpge'"
								:src="item.filePath" mode="widthFix" @click="$utils.previewImage(item.filePath)">
							</image>
						</div>
					</swiper-item>
				</swiper>
			</div>

			<div class="user">
				<div class="user-item">
					<image class="left" :src="userInfo.avatar" mode="">
					</image>
					<div class="center">
						<div class="head"> {{userInfo.nickname}} </div>
					</div>
					<div class="right right-red"> 关注 </div>
				</div>
				<div class="pri-row" v-if="detail.price">
					<div class="pri-left">
						<span class="price"><span class="price-icon">￥</span>{{detail.price}}</span>
						<span v-if="detail.freeShipping" class="attr">包邮</span>
					</div>
				</div>
				<div class="main-title">{{detail.title}}</div>

				<div class="bottom" @click="isOpen()">
					<div :class="['con']">
						{{detail.content}}
					</div>
					<div class="tag" v-for="(item,index) in detail.topicList">#{{item.name}}</div>
					<!-- <span :class="['con',isMore ? '' : 'hide']">{{article}}<span class="tag">#话题</span></span>
					<div class="unfold" v-if="article.length > 30" >{{isMore == true? '收起' : '展开全文'}}</div> -->
				</div>
				<div class="time">今天 {{detail.address}}</div>
			</div>

			<div class="comment-box">
				<div class="comment-title">共0条评论</div>
			</div>
		</div>
		<div class="footer-send" v-if="detail.type == 2">
			<div class="send-setting">
				<div class="like">
					<image src="/static/icons/like_on.png" mode="aspectFit"></image>
					10
				</div>
				<div class="like">
					<image src="/static/icons/collect_off.png" mode="aspectFit"></image>
					8
				</div>
				<div class="like">
					<image src="../../static/icons/news_off.png" mode="aspectFit"></image>
					10
				</div>
			</div>
			<div class="want" @click="toBuy(detail.id)">
				我想要
			</div>
		</div>
		<div class="footer-send" v-if="detail.type == 1">
			<div class="send-input" @click="openComment(null,'说点什么')">
				<div class="emoticon">
					<image src="/static/icons/icon-edit.png" mode=""></image>
				</div>
				<div class="input">
					<input type="text" :disabled="true" v-model="comment_content" style="pointer-events: none;"
						placeholder-style="font-size: 28rpx;color: #999999;" placeholder="说点什么" />
				</div>
			</div>
			<div class="send-setting">
				<div class="like-right">
					<image src="/static/icons/like_on.png" @click="cancelFavoriteInformation()" v-if="detail.favorite"
						mode="aspectFit"></image>
					10
				</div>
				<div class="like-right">
					<image src="/static/icons/collect_off.png" mode="aspectFit"></image>
					8
				</div>
				<div class="like-right">
					<image src="../../static/icons/news_off.png" mode="aspectFit"></image>
					10
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import data from '@/js/index/preview/data.js';
	import methods from '@/js/index/preview/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	export default {
		data,
		methods,
		onLoad(e) {
			this.getUserInfo()
		},
		onShow() {
			this.getData()
		},
		onReachBottom() {

		},
		onHide() {
			console.log('on hide')
		},


		onUnload() {},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			navigationBar,
			uniPopup
		}
	};
</script>
<style>
	page {
		background: #FFF;
	}

	uni-page {
		background: #FFF;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/index/product.scss';

	page {
		height: 100%;
		height: 100%;
	}
</style>